<template>
  <div style="width: 100%">
    <el-collapse v-model="activeName">
      <el-collapse-item title="基本信息" :name="0">
        <el-form ref="form" :model="formDataAll" :rules="rules" size="small" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="中文名称" prop="nameCn">
                <el-input v-model="formDataAll.nameCn"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编码标识" prop="name">
                <div v-if="dialogType==='add'" class="selfInput" :class="dialogType!=='add'?'disabledSelfInput':''">
                  <span>{{ tableNamePrefix }}</span>
                  <el-input v-model="formDataAll.name" :disabled="dialogType!=='add'">
                  </el-input>
                </div>
                <el-input :disabled="dialogType!=='add'" v-else v-model="formDataAll.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="标签">
                <el-select style="width: 100%;" filterable multiple v-model="formDataAll.labelIdList">
                  <template v-for="{name,oid} in tagList">
                    <el-option :label="name" :value="Number(oid)"></el-option>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="图标">
                <avue-input-icon v-model="formDataAll.icon"
                                 :icon-list="iconList"
                                 :modal-append-to-body="false"
                                 placeholder="图标"></avue-input-icon>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
      <Properties :show="show"
                  :displayTable="true"
                  :formDataAll="formDataAll"
                  :dialogType="dialogType"
                  :disabled="false"
                  ref="step3">
      </Properties>
      <Function :show="show"
                v-if="show"
                :displayTable="true"
                :formDataAll="formDataAll"
                :dialogType="dialogType"
                :disabled="false"
                ref="function">
      </Function>
    </el-collapse>

    <div class="md-component-btns">
      <el-button size="medium" type="primary" @click="save">保存</el-button>
      <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
    </div>
  </div>
</template>

<script>
import Function from "@/views/Model_Relation/entityTemp/Function.vue";
import * as entity from "@/api/modulManage/entity";

import * as api from "@/api/quickExtend/quickExtend"

import iconList from "@/config/iconList";
import Properties from "@/views/Model_Relation/entityTemp/Properties.vue";
import {mapGetters} from "vuex";
import {detail} from "@/api/quickExtend/quickExtend";
import {extends_attribute} from "@/api/modulManage/entity";

export default {
  name: "quickExtendTemp",
  components: {Properties, Function},
  provide: {
    "temp": "1"
  },
  data() {
    return {
      iconList: iconList,

      activeName: [0, 1, 2],

      formDataAll: {
        nameCn: "",
        name: "",
        icon: "",
        labelIdList: [],

        parentName: "",
        extendsData: [],
        functionInterfaceList: [],
        typeFunctionSettingList: [],
        businessInterfaceList: [],
        extendsAttributeData: [],
        extendAttributeList: [],
      },
      rules: {
        nameCn: [{required: true, message: "请输入中文名称", trigger: "blur"}],
        name: [{required: true, message: "请输入编码标识", trigger: "blur"}],
      },

      tagList: [],

      show: false,

      dialogType: "add",
    }
  },
  computed: {
    ...mapGetters(["applicationList"]),
    tableNamePrefix() {
      let appId = localStorage.getItem("appId");
      let name = this.applicationList.filter(i => appId === i.oid)[0].name;
      return name + "_";
    },
  },
  methods: {
    save() {
      this.$refs['form'].validate(f => {
        if (f) {
          let d = this.$refs["function"].validate()
          if (!d.state) {
            this.$message.warning(d.msg.join(",") + "未选择");
            return;
          }

          let form = this.deepCopy(this.formDataAll);
          form.functionInterfaceList = form.functionInterfaceList && form.functionInterfaceList.length > 0 ? form.functionInterfaceList.filter(i => i.extendsFlag !== 1) : []
          if (this.dialogType === "add") delete form.oid
          let method = this.dialogType === "add" ? 'save' : 'update'
          if (this.dialogType !== "add") {
            api.checkout({oid: form.oid}).then((res) => {
              let data = res.data.data;
              api[method]({...form, oid: data.oid}).then(() => {
                this.$message.success("保存成功");
                this.$emit('refresh');
                this.$emit('removeThisTabs');
              })
            })
          } else {
            api[method](form).then(() => {
              this.$message.success("保存成功");
              this.$emit('refresh');
              this.$emit('removeThisTabs');
            })
          }
        }
      })
    },
    getTagList() {
      entity.tagList().then(res => {
        this.tagList = res.data.data;
      })
    },
    getExtendsData() {
      entity.extends_data({type: "2", typeName: this.formDataAll.parentName, refType: "1"}).then(res => {
        res.data.data.forEach(i => {
          i.extendsFlag = 1;
        })
        this.formDataAll.extendsData = res.data.data;
      })
    },
    getExtendsAttr(form) {
      let name = [];
      if (form.functionInterfaceList && form.functionInterfaceList.length > 0) {
        let n = form.functionInterfaceList.map(i => i.name);
        name.push(...n)
      }
      if (form.businessInterfaceList && form.businessInterfaceList.length > 0) {
        let n = form.businessInterfaceList.map(i => i.name);
        name.push(...n)
      }

      extends_attribute({
        typeName: form.parentName,
        refType: "1",
        interfaceNames: name.join(",")
      }).then(res => {
        this.tableData_2 = res.data.data;
        res.data.data.forEach(i => {
          i.extendsFlag = true;
        })
        this.formDataAll.extendsAttributeData = res.data.data;

        this.$nextTick(() => {
          this.show = true
        })
      })
    },
    open(row) {
      this.dialogType = "add";
      this.formDataAll.functionInterfaceList = [];
      this.formDataAll.parentName = row.name;
      this.formDataAll.oid = row.oid;

      this.getTagList();
      this.getExtendsData();
      this.getExtendsAttr(row);
    },
    edit(row) {
      this.dialogType = "edit";

      api.detail({oid: row.oid}).then(res => {
        this.getTagList();

        this.formDataAll = this.deepCopy(res.data.data);
        this.getExtendsData();
        this.getExtendsAttr(res.data.data);
      })
    }
  }
}
</script>

<style scoped>

</style>
